<template>
    <div id="login">
        <el-form ref="form" :model="form" tag="form" id="form">
            <p>
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </p>
            <p>
                <el-input v-model="form.pwd" placeholder="请输入密码" type="password" @keyup.native.enter="login"></el-input>
            </p>
            <p>
                <el-button type="primary" @click="login">立即登陆</el-button>
                <el-button @click="empty">清空</el-button>
                <el-button @click="$router.push('/register')">去注册</el-button>
            </p>
            <div class="action">
                <p>默认注册用户名 : admin</p>
                <p>默认注册密码 : 123456</p>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: "",
                pwd: "",
                error: ""
            }
        }
    },
    methods: {
        empty() {
            this.form.username = '',
                this.form.pwd = ''
        },
        login() {
            console.log(window.localStorage.getItem('username') + '\n' + window.localStorage.getItem('backUrl'))
            if (!this.form.username) {
                alert('请输入用户名')
                return
            } else {
                if (this.form.username == window.localStorage.getItem('username')) {
                    this.$router.push({ path: 'index/data1' })
                } else {
                    alert("用户名或密码不正确，您可要点击去注册按钮注册！")
                }
            }


            // $.ajax({
            //     url: 'http://localhost:3000',
            //     type: "GET",
            //     data: {
            //         username: self.form.username,
            //         password: self.form.pwd
            //     },
            //     success: function(res) {
            //         if (res.body != null && res.body.length > 0) {
            //             self.$store.commit('isLogin', response.body[0]);
            //             self.name = ''
            //             self.pwd = ''
            //             self.$router.push({ path: '/home/index/data1' })
            //         } else {
            //             alert('请输入正确的用户名和密码！！！');
            //             self.name = ''
            //             self.pwd = ''
            //         }
            //     },
            //     error: function(err) {
            //         self.error = err
            //     }
            // })
        }
    },
    mounted() {
        // $.ajax({
        //     type: 'GET',
        //     url: 'https://api.douban.com/v2/book/search?q=python&fields=id,title',
        //     async: false,
        //     dataType: 'jsonp',
        //     callback: 'jsoncallback',
        //     data: { a: 1, b: 2 },
        //     success: function(res) {
        //         console.log(res.books);
        //     },
        //     error: function(err) {
        //         console.log(err);
        //     }
        // });
    }
}
</script>

<style scoped>
#login {
    background-image: url('../assets/images/logo.png');
    width: 100%;
    height: 750px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#form {
    width: 500px;
    height: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px;
}

.action{
    color:red
}

p {
    margin-top: 15px;
}
</style>
